import { render } from 'vue'
import XtxMessage from './xtx-message.vue'

// 准备dom容器--传统方式
// const div = document.createElement('div')
// div.setAttribute('class', 'xtx-message-container')
// document.body.appendChild(div)

// 用creataVNode+render 的方式
const divVNode = <div class="xtx-message-container"></div>
// const divVNode = h('div', { class: 'xtx-message-container' })
render(divVNode, document.body)
// 💥💥💥虚拟Dom 是一个对象，必须要 .el属性才能转换为一个真实的标签
const div = divVNode.el
console.log('这是虚拟的Dom', divVNode)
console.log('这是真实的Dom', div)

const xtxMessage = ({ message, type }) => {
//   console.log(h, render)
  const comVNode = <XtxMessage {...{ message, type }}></XtxMessage>
  // const comVNode = h(XtxMessage, { message, type })
  render(comVNode, div)
  //   3 秒后自动关闭
  setTimeout(() => {
    render(null, div)
  }, 3000)
}

export default xtxMessage
